<template>
  <div class="questionnaire-builder">
    <!-- 顶部操作区域 -->
    <div class="top-toolbar">
      <div class="left-actions">
        <button @click="goBack" class="back-btn">
          <ArrowLeft class="icon" />
          返回
        </button>
        <h2 class="form-title">{{ formTitle }}</h2>
        <button class="edit-btn">
          <Pencil class="icon" />
        </button>
      </div>
      <div class="actions">
        <button @click="deleteSelected" :disabled="!selectedElement" title="删除">
          <Trash2 class="icon" />
        </button>
        <button @click="toggleVisibility" :disabled="!selectedElement" title="隐藏/显示">
          <Eye class="icon" />
        </button>
        <button @click="moveElement(-1)" :disabled="!canMoveUp" title="向上移动">
          <ChevronUp class="icon" />
        </button>
        <button @click="moveElement(1)" :disabled="!canMoveDown" title="向下移动">
          <ChevronDown class="icon" />
        </button>
        <button @click="undo" :disabled="!canUndo" title="撤销">
          <Undo class="icon" />
        </button>
        <button @click="redo" :disabled="!canRedo" title="重做">
          <Redo class="icon" />
        </button>
        <button @click="toggleLock" :disabled="!selectedElement" title="锁定/解锁">
          <Lock v-if="isSelectedLocked" class="icon" />
          <Unlock v-else class="icon" />
        </button>
      </div>
      <div class="right-actions">
        <button class="save-btn" @click="saveData">保存</button>
        <button class="publish-btn">发布</button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧物料区域 -->
      <div class="materials-panel">
        <div class="panel-header">
          <button class="tab active">
            <LayoutGrid class="icon" />
            组件库
          </button>
          <button class="tab">
            <Layers class="icon" />
            图层
          </button>
        </div>
        <div class="materials-container">
          <h3>文本显示</h3>
          <div class="material-item" draggable="true" @dragstart="onDragStart($event, 'title-block')">
            <div class="material-preview title-block-preview">问卷标题</div>
          </div>
          <div class="material-item" draggable="true" @dragstart="onDragStart($event, 'title')">
            <div class="material-preview title-preview">一行标题</div>
          </div>
          <div class="material-item" draggable="true" @dragstart="onDragStart($event, 'paragraph')">
            <div class="material-preview paragraph-preview">一行段落</div>
          </div>

          <h3>用户输入</h3>
          <div class="material-item" draggable="true" @dragstart="onDragStart($event, 'input')">
            <div class="material-preview input-preview">
              <div>输入框标题</div>
              <div class="input-box">请输入...</div>
            </div>
          </div>
          <div class="material-item" draggable="true" @dragstart="onDragStart($event, 'radio')">
            <div class="material-preview radio-preview">
              <div>单选按钮</div>
              <div class="option"><span class="radio-circle"></span> 选项1</div>
              <div class="option"><span class="radio-circle"></span> 选项2</div>
            </div>
          </div>
          <div class="material-item" draggable="true" @dragstart="onDragStart($event, 'checkbox')">
            <div class="material-preview checkbox-preview">
              <div>多选按钮</div>
              <div class="option"><span class="checkbox-square"></span> 选项1</div>
              <div class="option"><span class="checkbox-square"></span> 选项2</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间显示区域 -->
      <div class="preview-panel" @dragover="onDragOver" @drop="onDrop">
        <div v-for="(element, index) in elements" :key="index" class="preview-element" :class="{
          'selected': selectedElementIndex === index,
          'hidden': element.hidden,
          'locked': element.locked
        }" @click="selectElement(index, $event)" :style="element.style">
          <!-- 锁定图标 -->
          <Lock v-if="element.locked" class="lock-icon" />

          <!-- 标题块 -->
          <div v-if="element.type === 'title-block'" class="title-block">
            <h1>{{ element.content.title || '问卷标题' }}</h1>
            <p>{{ element.content.description || '问卷描述...' }}</p>
          </div>

          <!-- 标题 -->
          <h2 v-else-if="element.type === 'title'">
            {{ element.content.text || '一行标题' }}
          </h2>

          <!-- 段落 -->
          <p v-else-if="element.type === 'paragraph'">
            {{ element.content.text || '一行段落' }}
          </p>

          <!-- 输入框 -->
          <div v-else-if="element.type === 'input'" class="input-field">
            <label>{{ element.content.label || '输入框标题' }}</label>
            <input type="text" :placeholder="element.content.placeholder || '请输入...'" />
          </div>

          <!-- 单选按钮 -->
          <div v-else-if="element.type === 'radio'" class="radio-group">
            <div class="question">{{ element.content.question || '您的选择' }}</div>
            <div v-for="(option, optIndex) in element.content.options" :key="optIndex" class="radio-option">
              <input type="radio" :name="'radio-' + index" :id="'radio-' + index + '-' + optIndex" />
              <label :for="'radio-' + index + '-' + optIndex">{{ option }}</label>
            </div>
          </div>

          <!-- 多选按钮 -->
          <div v-else-if="element.type === 'checkbox'" class="checkbox-group">
            <div class="question">{{ element.content.question || '您的选择（多选）' }}</div>
            <div v-for="(option, optIndex) in element.content.options" :key="optIndex" class="checkbox-option">
              <input type="checkbox" :id="'checkbox-' + index + '-' + optIndex" />
              <label :for="'checkbox-' + index + '-' + optIndex">{{ option }}</label>
            </div>
          </div>
        </div>

        <!-- 拖拽指示器 -->
        <div v-if="dragIndicatorVisible" class="drag-indicator" :style="{ top: dragIndicatorPosition + 'px' }"></div>

        <!-- 空状态提示 -->
        <div v-if="elements.length === 0" class="empty-state">
          <div class="empty-icon">
            <FileText class="icon" />
          </div>
          <p>从左侧拖拽组件到此处开始创建问卷</p>
        </div>
      </div>

      <!-- 右侧属性区域 -->
      <div class="properties-panel">
        <div class="panel-header">
          <button class="tab active">
            <FileText class="icon" />
            属性
          </button>
          <button class="tab">
            <Settings class="icon" />
            页面设置
          </button>
        </div>

        <div v-if="selectedElement" class="properties-container">
          <!-- 通用属性 -->
          <div class="property-group">
            <h3>基本属性</h3>

            <!-- 标题块属性 -->
            <template v-if="selectedElement.type === 'title-block'">
              <div class="property-item">
                <label class="required">标题</label>
                <input type="text" v-model="selectedElement.content.title" placeholder="问卷标题"
                  :disabled="selectedElement.locked" />
              </div>
              <div class="property-item">
                <label>描述</label>
                <textarea v-model="selectedElement.content.description" placeholder="问卷描述..."
                  :disabled="selectedElement.locked"></textarea>
              </div>
            </template>

            <!-- 标题属性 -->
            <template v-else-if="selectedElement.type === 'title'">
              <div class="property-item">
                <label>标题文本</label>
                <input type="text" v-model="selectedElement.content.text" placeholder="一行标题"
                  :disabled="selectedElement.locked" />
              </div>
            </template>

            <!-- 段落属性 -->
            <template v-else-if="selectedElement.type === 'paragraph'">
              <div class="property-item">
                <label>段落文本</label>
                <textarea v-model="selectedElement.content.text" placeholder="一行段落"
                  :disabled="selectedElement.locked"></textarea>
              </div>
            </template>

            <!-- 输入框属性 -->
            <template v-else-if="selectedElement.type === 'input'">
              <div class="property-item">
                <label>标签文本</label>
                <input type="text" v-model="selectedElement.content.label" placeholder="输入框标题"
                  :disabled="selectedElement.locked" />
              </div>
              <div class="property-item">
                <label>占位文本</label>
                <input type="text" v-model="selectedElement.content.placeholder" placeholder="请输入..."
                  :disabled="selectedElement.locked" />
              </div>
              <div class="property-item">
                <label>是否必填</label>
                <div class="toggle-switch">
                  <input type="checkbox" id="required-toggle" v-model="selectedElement.content.required"
                    :disabled="selectedElement.locked" />
                  <label for="required-toggle"></label>
                </div>
              </div>
            </template>

            <!-- 单选按钮属性 -->
            <template v-else-if="selectedElement.type === 'radio'">
              <div class="property-item">
                <label>问题文本</label>
                <input type="text" v-model="selectedElement.content.question" placeholder="您的选择"
                  :disabled="selectedElement.locked" />
              </div>
              <div class="property-item">
                <label>选项</label>
                <div v-for="(option, index) in selectedElement.content.options" :key="index" class="option-item">
                  <input type="text" v-model="selectedElement.content.options[index]"
                    :disabled="selectedElement.locked" />
                  <button @click="removeOption(index)" class="remove-btn"
                    :disabled="selectedElement.locked || selectedElement.content.options.length <= 1">
                    <X class="icon small" />
                  </button>
                </div>
                <button @click="addOption('radio')" class="add-btn" :disabled="selectedElement.locked">
                  <Plus class="icon small" /> 添加选项
                </button>
              </div>
            </template>

            <!-- 多选按钮属性 -->
            <template v-else-if="selectedElement.type === 'checkbox'">
              <div class="property-item">
                <label>问题文本</label>
                <input type="text" v-model="selectedElement.content.question" placeholder="您的选择（多选）"
                  :disabled="selectedElement.locked" />
              </div>
              <div class="property-item">
                <label>选项</label>
                <div v-for="(option, index) in selectedElement.content.options" :key="index" class="option-item">
                  <input type="text" v-model="selectedElement.content.options[index]"
                    :disabled="selectedElement.locked" />
                  <button @click="removeOption(index)" class="remove-btn"
                    :disabled="selectedElement.locked || selectedElement.content.options.length <= 1">
                    <X class="icon small" />
                  </button>
                </div>
                <button @click="addOption('checkbox')" class="add-btn" :disabled="selectedElement.locked">
                  <Plus class="icon small" /> 添加选项
                </button>
              </div>
            </template>
          </div>

          <!-- 样式属性 -->
          <div class="property-group">
            <h3>样式设置</h3>
            <div class="property-item">
              <label>对齐方式</label>
              <div class="alignment-buttons">
                <button @click="setAlignment('left')" :class="{ active: selectedElement.style.textAlign === 'left' }"
                  :disabled="selectedElement.locked">
                  <AlignLeft class="icon small" />
                </button>
                <button @click="setAlignment('center')"
                  :class="{ active: selectedElement.style.textAlign === 'center' }" :disabled="selectedElement.locked">
                  <AlignCenter class="icon small" />
                </button>
                <button @click="setAlignment('right')" :class="{ active: selectedElement.style.textAlign === 'right' }"
                  :disabled="selectedElement.locked">
                  <AlignRight class="icon small" />
                </button>
              </div>
            </div>
            <div class="property-item">
              <label>上下间距</label>
              <div class="slider-container">
                <input type="range" min="0" max="40" v-model.number="marginValue" @input="updateMargin"
                  :disabled="selectedElement.locked" />
                <span>{{ marginValue }}px</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 未选中元素时的提示 -->
        <div v-else class="no-selection">
          <div class="empty-icon">
            <MousePointer class="icon" />
          </div>
          <p>请选择一个元素来编辑其属性</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { saveAsJsFile } from './save.js'
import {
  ArrowLeft, Pencil, Trash2, Eye, ChevronUp, ChevronDown,
  Undo, Redo, Lock, Unlock, LayoutGrid, Layers, FileText,
  Settings, AlignLeft, AlignCenter, AlignRight, X, Plus, MousePointer
} from 'lucide-vue-next';

// 表单标题
const formTitle = ref('铁此木指');

// 元素列表
const elements = ref([]);

// 历史记录
const history = ref([]);
const historyIndex = ref(-1);

// 选中的元素
const selectedElementIndex = ref(null);
const selectedElement = computed(() => {
  if (selectedElementIndex.value !== null && elements.value[selectedElementIndex.value]) {
    return elements.value[selectedElementIndex.value];
  }
  return null;
});

// 拖拽相关
const dragType = ref(null);
const dragIndicatorVisible = ref(false);
const dragIndicatorPosition = ref(0);
const dropIndex = ref(null);

// 样式相关
const marginValue = ref(16);

// 计算属性
const canUndo = computed(() => historyIndex.value > 0);
const canRedo = computed(() => historyIndex.value < history.value.length - 1);
const canMoveUp = computed(() => selectedElementIndex.value !== null && selectedElementIndex.value > 0);
const canMoveDown = computed(() => selectedElementIndex.value !== null && selectedElementIndex.value < elements.value.length - 1);
const isSelectedLocked = computed(() => selectedElement.value?.locked || false);

// 监听选中元素变化，更新边距值
watch(selectedElementIndex, () => {
  if (selectedElement.value) {
    const marginTop = parseInt(selectedElement.value.style.marginTop || '16px');
    marginValue.value = marginTop;
  }
});

// 保存当前状态到历史记录
function saveToHistory () {
  // 如果当前不在历史记录的最后，则删除后面的记录
  if (historyIndex.value < history.value.length - 1) {
    history.value = history.value.slice(0, historyIndex.value + 1);
  }

  // 深拷贝当前元素状态并添加到历史记录
  history.value.push(JSON.parse(JSON.stringify(elements.value)));
  historyIndex.value = history.value.length - 1;
}

// 返回
function goBack () {
  // 实际应用中可能需要导航或确认保存
  console.log('返回上一页');
}

// 选择元素
function selectElement (index, event) {
  event.stopPropagation();
  selectedElementIndex.value = index;
}

// 删除选中元素
function deleteSelected () {
  if (selectedElementIndex.value !== null) {
    if (elements.value[selectedElementIndex.value].locked) return;

    saveToHistory();
    elements.value.splice(selectedElementIndex.value, 1);
    selectedElementIndex.value = null;
  }
}

// 切换元素可见性
function toggleVisibility () {
  if (selectedElementIndex.value !== null) {
    if (elements.value[selectedElementIndex.value].locked) return;

    saveToHistory();
    elements.value[selectedElementIndex.value].hidden = !elements.value[selectedElementIndex.value].hidden;
  }
}

// 移动元素
function moveElement (direction) {
  if (selectedElementIndex.value === null) return;

  const currentIndex = selectedElementIndex.value;
  const newIndex = currentIndex + direction;

  if (newIndex < 0 || newIndex >= elements.value.length) return;
  if (elements.value[currentIndex].locked) return;

  saveToHistory();

  // 交换元素
  const temp = elements.value[currentIndex];
  elements.value[currentIndex] = elements.value[newIndex];
  elements.value[newIndex] = temp;

  // 更新选中索引
  selectedElementIndex.value = newIndex;
}

// 撤销
function undo () {
  if (historyIndex.value > 0) {
    historyIndex.value--;
    elements.value = JSON.parse(JSON.stringify(history.value[historyIndex.value]));
    selectedElementIndex.value = null;
  }
}

// 重做
function redo () {
  if (historyIndex.value < history.value.length - 1) {
    historyIndex.value++;
    elements.value = JSON.parse(JSON.stringify(history.value[historyIndex.value]));
    selectedElementIndex.value = null;
  }
}

// 切换锁定状态
function toggleLock () {
  if (selectedElementIndex.value !== null) {
    saveToHistory();
    elements.value[selectedElementIndex.value].locked = !elements.value[selectedElementIndex.value].locked;
  }
}

// 拖拽开始
function onDragStart (event, type) {
  dragType.value = type;
  event.dataTransfer.effectAllowed = 'move';
}

// 拖拽经过
function onDragOver (event) {
  event.preventDefault();

  if (!dragType.value) return;

  const previewPanel = event.currentTarget;
  const rect = previewPanel.getBoundingClientRect();
  const y = event.clientY - rect.top;

  // 计算拖拽指示器位置
  dragIndicatorVisible.value = true;
  dragIndicatorPosition.value = y;

  // 计算放置索引
  const elementHeight = 80; // 估计的元素高度
  dropIndex.value = Math.floor(y / elementHeight);

  // 确保索引在有效范围内
  if (dropIndex.value < 0) dropIndex.value = 0;
  if (dropIndex.value > elements.value.length) dropIndex.value = elements.value.length;
}

// 拖拽放置
function onDrop (event) {
  event.preventDefault();
  dragIndicatorVisible.value = false;

  if (!dragType.value || dropIndex.value === null) return;

  saveToHistory();

  // 创建新元素
  const newElement = createElementByType(dragType.value);

  // 插入到指定位置
  elements.value.splice(dropIndex.value, 0, newElement);

  // 选中新添加的元素
  selectedElementIndex.value = dropIndex.value;

  // 重置拖拽状态
  dragType.value = null;
  dropIndex.value = null;
}

// 根据类型创建元素
function createElementByType (type) {
  const baseElement = {
    type,
    hidden: false,
    locked: false,
    style: {
      marginTop: '16px',
      marginBottom: '16px',
      textAlign: 'left'
    }
  };

  switch (type) {
    case 'title-block':
      return {
        ...baseElement,
        content: {
          title: '问卷标题',
          description: '问卷描述...'
        }
      };
    case 'title':
      return {
        ...baseElement,
        content: {
          text: '一行标题'
        }
      };
    case 'paragraph':
      return {
        ...baseElement,
        content: {
          text: '一行段落'
        }
      };
    case 'input':
      return {
        ...baseElement,
        content: {
          label: '输入框标题',
          placeholder: '请输入...',
          required: false
        }
      };
    case 'radio':
      return {
        ...baseElement,
        content: {
          question: '您的选择',
          options: ['选项1', '选项2', '选项3']
        }
      };
    case 'checkbox':
      return {
        ...baseElement,
        content: {
          question: '您的选择（多选）',
          options: ['选项1', '选项2', '选项3']
        }
      };
    default:
      return baseElement;
  }
}

// 设置对齐方式
function setAlignment (align) {
  if (selectedElement.value && !selectedElement.value.locked) {
    saveToHistory();
    selectedElement.value.style.textAlign = align;
  }
}

// 更新边距
function updateMargin () {
  if (selectedElement.value && !selectedElement.value.locked) {
    saveToHistory();
    selectedElement.value.style.marginTop = `${marginValue.value}px`;
    selectedElement.value.style.marginBottom = `${marginValue.value}px`;
  }
}

// 添加选项
function addOption (type) {
  if (selectedElement.value && !selectedElement.value.locked) {
    saveToHistory();
    const newOption = `选项${selectedElement.value.content.options.length + 1}`;
    selectedElement.value.content.options.push(newOption);
  }
}

// 删除选项
function removeOption (index) {
  if (selectedElement.value && !selectedElement.value.locked) {
    if (selectedElement.value.content.options.length <= 1) return;
    saveToHistory();
    selectedElement.value.content.options.splice(index, 1);
  }
}

// 初始化历史记录
saveToHistory();




// 保存数据
const saveData = () => {
  // 构建JSON数据
  const jsonData = {
    id: 1003,
    data: {
      name: '日常生活问卷[ADL]',
      desc: '<font color="#1899ff">访视指导人的回答或家属、护理人员等知情人的回答</font>',
      commonOptions: [],
      children: canvasItems.map((item, index) => {
        return {
          id: index + 1,
          sn: `${index + 1}`,
          title: item.label,
          direction: 'vertical',
          level: 1,
          type: item.type,
          tip: '',
          code: index + 1,
          options: item.options?.map((opt, i) => ({
            value: opt.value,
            label: opt.label,
            score: (3 - i) * 5 // 简单示例，实际可能有更复杂的计分逻辑
          })) || [],
          fields: [
            {
              value: 'value',
              label: '选项'
            }
          ],
          requiredFields: ['value']
        };
      })
    }
  };

  // 转换为JSON字符串
  const jsonString = JSON.stringify(jsonData, null, 2);

  // 创建下载链接
  const blob = new Blob([jsonString], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'form-data.json';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);

  console.log('保存的JSON数据:', jsonData);
};
</script>

<style>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333;
  background-color: #f5f5f5;
}

.questionnaire-builder {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 顶部工具栏 */
.top-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 56px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.left-actions,
.right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 8px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.actions button:hover:not(:disabled) {
  background-color: #f0f0f0;
}

.actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
}

.edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.save-btn,
.publish-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.save-btn {
  background-color: transparent;
  border: 1px solid #e0e0e0;
}

.publish-btn {
  background-color: #1677ff;
  color: white;
}

/* 主内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧物料面板 */
.materials-panel {
  width: 280px;
  background-color: #fff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.tab.active {
  color: #1677ff;
  border-bottom: 2px solid #1677ff;
}

.materials-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.materials-container h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 16px 0 8px;
  color: #666;
}

.material-item {
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  cursor: move;
  background-color: #fff;
  transition: box-shadow 0.2s;
}

.material-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.material-preview {
  padding: 12px;
  font-size: 14px;
}

.title-block-preview {
  font-weight: bold;
  text-align: center;
}

.title-preview {
  font-weight: bold;
}

.input-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-box {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px;
  font-size: 12px;
  color: #999;
}

.radio-preview,
.checkbox-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.radio-circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #999;
  border-radius: 50%;
}

.checkbox-square {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #999;
  border-radius: 2px;
}

/* 中间预览面板 */
.preview-panel {
  flex: 1;
  background-color: #f5f5f5;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}

.preview-element {
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s, opacity 0.2s;
}

.preview-element.selected {
  box-shadow: 0 0 0 2px #1677ff;
}

.preview-element.hidden {
  opacity: 0.5;
}

.preview-element.locked {
  position: relative;
}

.lock-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  color: #999;
}

.drag-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1677ff;
  pointer-events: none;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-bottom: 16px;
}

/* 右侧属性面板 */
.properties-panel {
  width: 280px;
  background-color: #fff;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.properties-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.property-group {
  margin-bottom: 24px;
}

.property-group h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #666;
}

.property-item {
  margin-bottom: 16px;
}

.property-item label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}

.property-item label.required::after {
  content: "*";
  color: #ff4d4f;
  margin-left: 4px;
}

.property-item input[type="text"],
.property-item textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.property-item textarea {
  min-height: 80px;
  resize: vertical;
}

.alignment-buttons {
  display: flex;
  gap: 8px;
}

.alignment-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
}

.alignment-buttons button.active {
  background-color: #e6f4ff;
  border-color: #1677ff;
  color: #1677ff;
}

.alignment-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-container input[type="range"] {
  flex: 1;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #999;
}

.remove-btn:hover:not(:disabled) {
  color: #ff4d4f;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #1677ff;
  width: 100%;
  justify-content: center;
}

.no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  padding: 16px;
}

/* 表单元素样式 */
.title-block {
  text-align: center;
}

.title-block h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.input-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-field input {
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.question {
  font-weight: 500;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 开关样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.toggle-switch label:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 5px;
  bottom: 0px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.toggle-switch input:checked+label {
  background-color: #1677ff;
}

.toggle-switch input:checked+label:before {
  transform: translateX(20px);
}

.toggle-switch input:disabled+label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 图标样式 */
.icon {
  width: 20px;
  height: 20px;
}

.icon.small {
  width: 16px;
  height: 16px;
}
</style>